<template>
	<view class="background-color box-c d-ai-c">
		<view class="distribution-card box-c d-jc-sb">
			<view class="pl-3">
				<view class="card-1">
					<text v-if="orderInfo.orderStatus==-1">订单待支付~</text>
					<text v-if="orderInfo.orderStatus==1">
						<text v-if="orderInfo.isTakes==1">
							<text v-if="orderInfo.takesState==1">
								商家正在备货~
							</text>
							<text v-if="orderInfo.takesState==2">
								商品配送中~
							</text>
							<text v-if="orderInfo.takesState==3">
								商品已送达~
							</text>
						
						</text>
						<text v-if="orderInfo.isTakes==2">
							<text v-if="orderInfo.takesState==-1">
								商品等待提货~
							</text>
							<text v-if="orderInfo.takesState==-2">
								商品已提货~
							</text>
						</text>
						
						
					</text>

					<text v-if="orderInfo.orderStatus==2">已完成~</text>
					<text v-if="orderInfo.orderStatus==3">订单已取消~</text>

				</view>
				<view class="card-2">
					<text v-if="orderInfo.orderStatus==-1">订单超过30分钟自动取消，请在28分15秒内完成支付</text>
					<text v-if="orderInfo.orderStatus==1 ">
						<text v-if="orderInfo.isTakes==1">
							<text v-if='orderInfo.takesState==1'>
								商家正在备货中，请耐心等待
							</text>
							<text v-if='orderInfo.takesState==2'>
								商家正在配送中，请您耐心等待
							</text>
							<text v-if='orderInfo.takesState==3'>
								商品已送达，祝您用餐愉快！
							</text>
						</text>
						<text v-if="orderInfo.isTakes==2">
							<text v-if='orderInfo.takesState==-1'>
								等待您上门提货
							</text>
							<text v-if='orderInfo.takesState==-2'>
								商品已经提货
							</text>
							
						</text>
						
					</text>
					<text v-if="orderInfo.orderStatus==2">订单已经完成</text>
					<text v-if="orderInfo.orderStatus==3">支付超时，订单已取消</text>
					<text v-if="orderInfo.orderStatus==4">您订单已取消</text>
				</view>
			</view>
			<view class="card-3 box d-jc-c">
				<view class="flex-1 box-c d-jc-sa">
					<image class="dingwei" src="../../static/images/order/dingwei.png" mode=""></image>
					<text class=""></text>
					<text class=""></text>
				</view>
				<view class="flex-6 relation box-c d-jc-sa">
					<view class="">
						<!-- 自取订单-->
						<text>{{orderInfo.phone}}</text>
					</view>
					<view class="">
						<text>
							{{orderInfo.province}}{{orderInfo.city}}{{orderInfo.district}}{{orderInfo.address}}
						</text>
					</view>
					<view class="box d-jc-end mr-2">
						<text class="tag" v-show="orderInfo.isTakes==2">
							到店自取
						</text>
						<text class="tag" v-show="orderInfo.isTakes==1">
							配送订单
						</text>
					</view>
				</view>
			</view>
		</view>
		<view class="mt-2" :style="{height: height+'px'}">
			<scroll-view scroll-y="true" style="height: 100%;">
				<view class="product">
					<view class="shop-title">
						<text>{{orderInfo.shopName}}</text>
					</view>
					<view class="mb-2" v-for="(item,index) in orderInfo.goodSkuDto" :key=index>
						<view class="box product-info">
							<view class=" box d-jc-c flex-1">
								<image :src="item.image" mode=""></image>
							</view>
							<view class="box-c d-jc-sb flex-4 ml-2 product-info-l2">
								<view class="box product-title">
									<text>{{item.goodsName}}</text>
								</view>
								<view class="box product-price">
									<text class="flex-1">x{{item.number}}</text>
									<text>{{item.goodsPrice}}积分</text>
								</view>
							</view>
						</view>
					</view>
					<view class="line">

					</view>
					<view class="">
						<view class="box d-jc-sb order-price">
							<text>订单金额</text>
							<text>{{orderInfo.goodsPrice}}积分</text>
						</view>
						<view class="box d-jc-sb order-price">
							<text>优惠金额</text>
							<text>0积分</text>
						</view>
						<view class="box d-jc-sb order-price">
							<text>运费</text>
							<text>0积分</text>
						</view>
					</view>
					<view class="line">

					</view>


				</view>
				<view class="order-info">
					<view class="">
						订单信息
					</view>
					<view class="line">
					</view>
					<view class="">
						<view class="box d-jc-sb order-price">
							<text>订单编号</text>
							<text>{{orderInfo.orderNumber}}</text>
						</view>
						<view class="box d-jc-sb order-price">
							<text>下单时间</text>
							<text>{{orderInfo.createTime}}</text>
						</view>
					</view>

				</view>



			</scroll-view>
		</view>
		<view class="bottom box d-jc-end d-ai-c">
			<view class="box order-1 d-jc-c mx-3" v-if="orderInfo.orderStatus==-1" @tap='updateOrderState(4)'>
				<text>取消订单</text>
			</view>
			<view class="order-2 box d-jc-c mx-3" v-if="orderInfo.orderStatus==-1" @tap='open()'>
				<text>
					立即支付
				</text>
			</view>
			<view class="order-2 box d-jc-c mx-3" v-if="orderInfo.orderStatus==1" @tap='updateOrderState(2)'>
				<text>
					确认收货
				</text>
			</view>
			<view class="box order-1 d-jc-c mx-3"
				v-if="orderInfo.orderStatus==2 ||orderInfo.orderStatus==4 ||orderInfo.orderStatus==3"
				@tap='deleteOrder(-2)'>
				<text>删除订单</text>
			</view>
			<view class="order-2 box d-jc-c mx-3" v-if="orderInfo.orderStatus==4 ||orderInfo.orderStatus==3"
				@tap='againBuy'>
				<text>
					再次购买
				</text>
			</view>
		</view>
		<wybpopup ref="popup" type='bottom'>
			<view class="popup">
				<view class="pop-t">
					<image class="pop_images1" src="../../static/images/shoplist/guanbi@2x.png" mode="" @tap="close()"></image>
					<view>选择支付方式</view>
				</view>
				<view class="pop-c">
					<text>￥</text>
					<text>{{orderInfo.goodsPrice}}</text>
				</view>
				<radio-group @change="radioChange">
					<label class="uni-lab" v-for="(item, index) in items" :key="item.value">
						<view class="">
							<image v-if="item.value==='1'" class="pop_images2" src="../../static/images/shoplist/jfzf@2x.png" mode=""></image>
							<image v-if="item.value==='2'" class="pop_images2" src="../../static/images/shoplist/wxzf@2x.png" mode=""></image>
							<view class="pop-name">
								<text>{{item.name}}</text>
								<text v-if="item.value==='1'">(剩余{{userInfo.userInfo.accumulatePoints}}积分)</text>
							</view>
						</view>
						<view>
							<radio :value="item.value" :checked="index === current" />
						</view>
					</label>
				</radio-group>
				<button class="payment" type="default" @tap='pay()'>
					立即支付
				</button>
		
		
			</view>
		
		</wybpopup>
	</view>
</template>

<script>
	import wybpopup from '@/components/wyb-popup/wyb-popup.vue'
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		components: {
			wybpopup
		},
		data() {
			return {
				height: 0,
				orderInfo: '',
				items: [{
						value: '1',
						name: '积分支付'
					},
					{
						value: '2',
						name: '微信支付',
						checked: 'true'
					}
				
				],
				current: 0
			}
		},
		onShow() {
			this.getUserInfo()
		},
		computed:mapState(['loginState', 'userInfo']),
		onReady() {
			let _this = this;
			uni.getSystemInfo({ //调用uni-app接口获取屏幕高度
				success(res) { //成功回调函数
					console.log(JSON.stringify(res))
					_this.height = res.windowHeight - uni.upx2px(450)
					console.log(_this.height)
				}
			})

		},
		onLoad(parameter) {
			this.getOrdersInfo(parameter.orderNumber)
		},
		methods: {
			...mapMutations(['logout', 'setUserInfo']),
			// 获取用户信息
			getUserInfo() {
				
				console.log(this.loginState)
				console.log(this.userInfo)
				this.$api.getUserInfo().then((res) => {
					let userInfo = res.data.dataMap
					// this.getUserIn = res.data.dataMap
					console.log(userInfo)
					if (userInfo != null) {
						this.setUserInfo(userInfo)
					}
			
				})
			
			},
			radioChange: function(evt) {
				for (let i = 0; i < this.items.length; i++) {
					if (this.items[i].value === evt.detail.value) {
						this.current = i;
						break;
					}
				}
			},
			open() {
				this.$refs.popup.show()
			},
			close() {
				this.$refs.popup.hide()
			},
			deleteOrder() {
				this.$api.deleteOrder({
					orderNumber: this.orderInfo.orderNumber
				}).then((res) => {
					if (res.data.success) {
						uni.showToast({
							title: "成功",
							duration: 1000,
						});
						uni.$emit("carData", 1)
						setTimeout(function() {
							uni.navigateBack({
								delta: 1
							});
						}, 1100);
			
					} else {
						uni.showToast({
							title: "订单删除失败",
							duration: 1000,
							icon: 'none',
						});
					}
				})
			},
			updateOrderState(state) {
				let takesState = ''
				let userOrderStatus = ''
				let arr = []
				if (state == 2) {
					takesState = 3
				}
				arr.push(this.orderInfo.orderNumber)
				this.$api.updateOrderState({
					orderNo: arr,
					orderStatus: state,
					takesState: takesState
				}).then((res) => {
					if (res.data.success) {
						uni.showToast({
							title: "成功",
							duration: 1000,
						});
						uni.$emit("carData", 1)
						setTimeout(function() {
							uni.navigateBack({
								delta: 1
							});
						}, 1100);

					} else {
						uni.showToast({
							title: "订单删除失败",
							duration: 1000,
							icon: 'none',
						});
					}
				})
			},
			pay() {
				//选择支付方式
				let type=1
				if(this.current===0){
					type=1
				}
				if(this.current===1){
					type=2
				}
				let _this = this;
				uni.showLoading({
					title: '正在支付...',
					mask: true
				})
				let arr = []
				arr.push(this.orderInfo.orderNumber)
				this.$api.payOrder({
					orderNo: arr,
					type:type
				}).then((res) => {
					uni.hideLoading()
					if(type==1){ //余额支付
						if (res.data.code == 200) {
							uni.showToast({
								title: '支付成功',
								duration: 1000,
								icon: "none"
							});
							this.close()
							uni.navigateTo({
								url: '../pay/pay-state'
							});
						
						} else {
							uni.hideLoading()
							uni.showToast({
								title: res.data.msg,
								duration: 1000,
								icon: "none"
							});
							setTimeout(function() {
								// _this.closePup()
								uni.navigateTo({
									url: '../pay/pay'
								});
							}, 1000);
						
						}
					}else if(type==2){
						uni.requestPayment({
							provider: "wxpay",
							orderInfo: res.data.data,
							success:(res) =>{
								uni.showToast({
									title: "支付成功",
									duration: 2500,
								});
								this.close()
								setTimeout(function() {
									uni.navigateTo({
										url: '../pay/pay-state'
									});
								}, 1700);
						
							},
							fail(e) {
								console.log(e)
								uni.showToast({
									title: "支付失败",
									duration: 2000,
									icon: 'none',
								});
								// plus.nativeUI.alert(JSON.stringify(e), function() {
						
								// }, "提示", "关闭")
						
							}
						})
					}
					

				})

			},
			// 再次购买
			againBuy() {
				uni.navigateTo({
					url: '../shopList/product?shopId=' + this.orderInfo.shopId
				})
			},
			getOrdersInfo(orderNumber) {
				this.$api.getOrdersInfo({
					orderNumber: orderNumber
				}).then((res) => {
					if (res.data.success) {
						this.orderInfo = res.data.dataMap

					} else {

					}

				})
			}


		}
	}
</script>

<style lang="scss" scoped>
	.payment{
		width: 670rpx;
		height: 88rpx;
		background: #FF5551;
		border-radius: 44rpx;
		font-size: 32rpx;
		font-weight: 500;
		color: #FFFFFF;
		margin-top: 100rpx;
	}
	.pop-name>text:nth-child(1){
		font-size: 32rpx;
		font-weight: bold;
		color: #333333;
		margin-left: 13rpx;
	}
	.pop-name>text:nth-child(2){
		font-size: 32rpx;
		font-weight: 500;
		color: #999999;
		line-height: 120rpx;
	}
	.uni-lab>view:nth-child(1){
		margin-left: 20rpx;
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
	}
	.uni-lab{
		width: 690rpx;
		height: 100rpx;
		margin: 0rpx auto;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 20rpx;
	}
	.pop_images2{
		width: 52rpx;
		height: 52rpx;
	}
	.pop-c{
		text-align: center;
		margin-bottom: 60rpx;
	}
	.pop-c>text:nth-child(1){
		font-size: 40rpx;
		font-weight: 800;
		color: #333333;
	}
	.pop-c>text:nth-child(2){
		font-size: 80rpx;
		font-weight: 800;
		color: #333333;
	}
	.pop-t{
		display: flex;
		align-items: center;
		text-align: center;
		margin-top: 40rpx;
	}
	.pop-t>view{
		font-size: 30rpx;
		font-weight: bold;
		color: #333333;
		margin-left: 210rpx;
	}
	.pop_images1{
		width: 48rpx;
		height: 48rpx;
		margin-left: 40rpx;
	}
	.popup {
		width: 750rpx;
		height: 785rpx;
		background: #FFFFFF;
		border-radius: 60rpx 60rpx 0rpx 0rpx;
		overflow: hidden;
	}
	.tag {
		padding: 0 10rpx;
		border-radius: 8rpx;
		background-color: #ffd7cf;
		color: #8b8b8b;
	}

	.order-1 {
		width: 150rpx;
		height: 50rpx;
		padding: 10rpx;
		border: solid 2rpx #999999;
		color: #999999;
		font-size: 30rpx;
		border-radius: 50rpx;

		&>text {
			text-align: center;
		}

	}

	.order-2 {
		width: 152rpx;
		height: 52rpx;
		padding: 10rpx;
		font-size: 30rpx;
		border-radius: 50rpx;
		color: #fff;
		background-color: #FF5551;

		&>text {
			text-align: center;
		}

	}

	.bottom view {}

	.bottom {
		width: 750rpx;
		height: 120rpx;
		background: #FFFFFF;
		box-shadow: 0px -1px 0px 0px #F8F8F8;
		position: fixed;
		bottom:0;
	}

	.order-info {
		width: 650rpx;
		background: #FFFFFF;
		box-shadow: 0px 0px 20rpx 0px rgba(0, 0, 0, 0.05);
		border-radius: 12rpx;
		padding: 20rpx;
		margin: 20rpx 0;

		&>text:nth-child(1) {
			font-weight: bold;
		}
	}

	.order-price {
		font-weight: 26rpx;
		margin-top: 10rpx;
	}

	.order-price text:nth-child(1) {
		color: #999999;

	}

	.order-price text:nth-child(2) {
		color: #666666;

	}

	.line {
		width: 100%;
		height: 4rpx;
		background-color: #F8F8F8;
		margin-top: 30rpx;
		border-radius: 50rpx;
	}

	.product {
		width: 650rpx;
		background: #FFFFFF;
		box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.05);
		border-radius: 12rpx;
		padding: 0 20rpx;




		.shop-title {
			color: #666666;
			font-size: 30rpx;
			position: sticky;
			z-index: 99;
			top: 0rpx;
			background-color: #fff;
			padding: 10rpx 0rpx;
		}

		.product-info image {
			width: 128rpx;
			height: 128rpx;
			border-radius: 15rpx;

		}

		.product-title text:nth-child(1) {
			font-size: 30rpx;
			font-weight: bold;
		}

		.product-price text:nth-child(1) {
			color: #666666;
			font-size: 30rpx;
		}

		.product-price text:nth-child(2) {
			color: #FF5551;
			font-size: 32rpx;
		}
	}

	.background-color {
		background-color: #F8F8F8;

		.card-1 {
			color: #ffffff;
			font-size: 40rpx;
			letter-spacing: 10rpx;
		}

		.card-2 {
			color: #ffffff;
			font-size: 24rpx;
		}

		.card-3 {
			padding: 20rpx 10rpx;
			margin: 0 auto;
			width: 670rpx;
			height: 150rpx;
			background: #FFFFFF;
			box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.05);
			border-radius: 12px;

			.dingwei {
				margin: 0 auto;
				width: 48rpx;
				height: 48rpx;
			}

			.relation view:nth-child(1) {
				font-size: 34rpx;
			}

			.relation view:nth-child(2) {
				font-size: 26rpx;
				color: #999999;
			}
		}

	}


	.distribution-card {
		background: linear-gradient(0deg, #F8F8F8 0%, #FF7E51 49%, #FF5551 100%);
		width: 750rpx;
		height: 320rpx;
	}
</style>
